<template>
  <view class="home-container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left">
        <img class="app-logo" src="/static/sakura.png" alt="Logo">
        <text class="app-name">SakuraEcho</text>
      </view>
      <view class="nav-right">
        <view class="nav-icon" @click="goToSearch">
          <text class="icon">🔍</text>
        </view>
        <view class="nav-icon" @click="goToSettings">
          <text class="icon">⚙️</text>
        </view>
      </view>
    </view>

    <scroll-view class="content-scroll" scroll-y="true">
      <!-- 欢迎横幅 -->
      <view class="welcome-banner">
        <view class="banner-content">
          <text class="banner-title">欢迎来到樱花回音</text>
          <text class="banner-subtitle">开启你的动漫创作之旅</text>
          <view class="banner-stats">
            <view class="stat-item">
              <text class="stat-number">1.2K+</text>
              <text class="stat-label">角色创作</text>
            </view>
            <view class="stat-item">
              <text class="stat-number">3.5K+</text>
              <text class="stat-label">故事生成</text>
            </view>
            <view class="stat-item">
              <text class="stat-number">2.8K+</text>
              <text class="stat-label">社区作品</text>
            </view>
          </view>
        </view>
        <view class="banner-decoration">
          <text class="decoration-icon">🎨</text>
        </view>
      </view>

      <!-- 热门推荐 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">热门推荐</text>
          <text class="section-more" @click="viewMoreRecommendations">更多 ›</text>
        </view>
        <scroll-view class="recommend-scroll" scroll-x="true">
          <view class="recommend-list">
            <view 
              v-for="(item, index) in recommendations" 
              :key="index" 
              class="recommend-card"
              @click="viewRecommendation(item)"
            >
              <image class="card-image" :src="item.image" mode="aspectFill"></image>
              <view class="card-content">
                <text class="card-title">{{ item.title }}</text>
                <text class="card-desc">{{ item.description }}</text>
                <view class="card-stats">
                  <view class="stat">
                    <text class="stat-icon">❤️</text>
                    <text class="stat-text">{{ item.likes }}</text>
                  </view>
                  <view class="stat">
                    <text class="stat-icon">👁️</text>
                    <text class="stat-text">{{ item.views }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 功能网格 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">创作工具</text>
        </view>
        <view class="function-grid">
          <view 
            v-for="(func, index) in functions" 
            :key="index" 
            class="function-item"
            @click="navigateToFunction(func)"
          >
            <view class="function-icon" :style="{ background: func.color }">
              <text class="icon">{{ func.icon }}</text>
            </view>
            <text class="function-name">{{ func.name }}</text>
            <text class="function-desc">{{ func.description }}</text>
          </view>
        </view>
      </view>

      <!-- 今日任务 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">今日任务</text>
          <text class="section-more" @click="viewAllTasks">查看全部 ›</text>
        </view>
        <view class="tasks-list">
          <view 
            v-for="(task, index) in tasks" 
            :key="index" 
            class="task-item"
            @click="completeTask(task)"
          >
            <view class="task-checkbox" :class="{ 'completed': task.completed }">
              <text class="checkbox-icon">{{ task.completed ? '✓' : '' }}</text>
            </view>
            <view class="task-content">
              <text class="task-title" :class="{ 'completed': task.completed }">{{ task.title }}</text>
              <text class="task-reward">+{{ task.reward }} 经验</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部提示 -->
      <view class="footer-tip">
        <text class="tip-text">每天都有新的创作灵感等待发现</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      recommendations: [
        {
          id: 1,
          title: '樱花少女的奇幻冒险',
          description: '一个关于勇气与友谊的温暖故事',
          image: '/static/recommend-1.jpg',
          likes: 256,
          views: 1280
        },
        {
          id: 2,
          title: '星际武士的传说',
          description: '跨越星际的史诗级战斗',
          image: '/static/recommend-2.jpg',
          likes: 189,
          views: 956
        },
        {
          id: 3,
          title: '魔法学院日常',
          description: '充满魔法的校园生活',
          image: '/static/recommend-3.jpg',
          likes: 312,
          views: 1542
        }
      ],
      functions: [
        {
          name: '角色生成',
          description: '创建独特动漫角色',
          icon: '🎭',
          color: '#FF69B4',
          path: '/pages/character/character'
        },
        {
          name: '对话交互',
          description: '与AI角色聊天',
          icon: '💬',
          color: '#4169E1',
          path: '/pages/chat/chat'
        },
        {
          name: '故事生成',
          description: '创作精彩故事',
          icon: '📖',
          color: '#32CD32',
          path: '/pages/story/story'
        },
        {
          name: '多模态生成',
          description: '图片音频创作',
          icon: '🎨',
          color: '#9370DB',
          path: '/pages/multimodal/multimodal'
        },
        {
          name: 'IP共享',
          description: '分享你的作品',
          icon: '🌟',
          color: '#FFA500',
          path: '/pages/ip-sharing/ip-sharing'
        },
        {
          name: '动漫百科',
          description: '学习动漫知识',
          icon: '📚',
          color: '#20B2AA',
          path: '/pages/encyclopedia/encyclopedia'
        }
      ],
      tasks: [
        {
          id: 1,
          title: '完成一个角色创作',
          reward: 50,
          completed: false
        },
        {
          id: 2,
          title: '生成一个短篇故事',
          reward: 80,
          completed: false
        },
        {
          id: 3,
          title: '浏览社区作品',
          reward: 20,
          completed: true
        }
      ]
    }
  },
  methods: {
    goToSearch() {
      uni.navigateTo({
        url: '/pages/search/search'
      })
    },
    goToSettings() {
      uni.navigateTo({
        url: '/pages/settings/settings'
      })
    },
    viewMoreRecommendations() {
      uni.navigateTo({
        url: '/pages/recommendations/recommendations'
      })
    },
    viewRecommendation(item) {
      uni.showToast({
        title: `查看：${item.title}`,
        icon: 'none'
      })
    },
    navigateToFunction(func) {
      uni.navigateTo({
        url: func.path
      })
    },
    viewAllTasks() {
      uni.navigateTo({
        url: '/pages/tasks/tasks'
      })
    },
    completeTask(task) {
      if (!task.completed) {
        task.completed = true
        uni.showToast({
          title: `完成任务！获得${task.reward}经验`,
          icon: 'success'
        })
      }
    }
  },
  onLoad() {
    // 页面加载时的初始化
    console.log('首页加载完成')
  },
  onShow() {
    // 页面显示时的逻辑
  }
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #FFE4E6 0%, #FFF0F5 50%, #FFE4E6 100%);
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 32rpx 20rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10rpx);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-left {
  display: flex;
  align-items: center;
}

.app-logo {
  width: 40rpx;
  height: 40rpx;
  margin-right: 16rpx;
}

.app-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #FF69B4;
}

.nav-right {
  display: flex;
  gap: 32rpx;
}

.nav-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: #F8F8FF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  font-size: 32rpx;
}

.content-scroll {
  height: calc(100vh - 120rpx);
}

.welcome-banner {
  background: linear-gradient(135deg, #FF69B4 0%, #FF1493 100%);
  margin: 32rpx;
  border-radius: 32rpx;
  padding: 60rpx 48rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  box-shadow: 0 8rpx 32rpx rgba(255, 105, 180, 0.3);
}

.banner-content {
  flex: 1;
}

.banner-title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.banner-subtitle {
  display: block;
  font-size: 28rpx;
  opacity: 0.9;
  margin-bottom: 40rpx;
}

.banner-stats {
  display: flex;
  gap: 48rpx;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.stat-label {
  display: block;
  font-size: 24rpx;
  opacity: 0.8;
}

.banner-decoration {
  margin-left: 48rpx;
}

.decoration-icon {
  font-size: 80rpx;
  opacity: 0.8;
}

.section {
  margin: 60rpx 32rpx 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.section-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.section-more {
  font-size: 28rpx;
  color: #FF69B4;
}

.recommend-scroll {
  white-space: nowrap;
}

.recommend-list {
  display: inline-flex;
  gap: 32rpx;
}

.recommend-card {
  width: 400rpx;
  background: white;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.card-image {
  width: 100%;
  height: 240rpx;
  background: #F8F8FF;
}

.card-content {
  padding: 32rpx;
}

.card-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}

.card-desc {
  display: block;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 24rpx;
  line-height: 1.4;
}

.card-stats {
  display: flex;
  gap: 32rpx;
}

.stat {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.stat-icon {
  font-size: 24rpx;
}

.stat-text {
  font-size: 24rpx;
  color: #888;
}

.function-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32rpx;
}

.function-item {
  background: white;
  border-radius: 24rpx;
  padding: 40rpx 24rpx;
  text-align: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.function-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24rpx;
}

.function-icon .icon {
  font-size: 40rpx;
}

.function-name {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.function-desc {
  display: block;
  font-size: 22rpx;
  color: #888;
}

.tasks-list {
  background: white;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.task-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #F0F0F0;
}

.task-item:last-child {
  border-bottom: none;
}

.task-checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #FF69B4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.task-checkbox.completed {
  background: #FF69B4;
}

.checkbox-icon {
  font-size: 24rpx;
  color: white;
}

.task-content {
  flex: 1;
}

.task-title {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.task-title.completed {
  text-decoration: line-through;
  color: #888;
}

.task-reward {
  display: block;
  font-size: 22rpx;
  color: #FF69B4;
}

.footer-tip {
  text-align: center;
  padding: 60rpx 32rpx;
}

.tip-text {
  font-size: 26rpx;
  color: #888;
  font-style: italic;
}
</style>